<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
		<title>订单管理</title>
		<link href="../../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="../../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../../css/orstyle.css" rel="stylesheet" type="text/css">
		<script src="../../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/sweetalert2.all.js"></script>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd" id="indexHeader">
								</div>
							</div>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
			</article>
		</header>
            
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-order">

						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">买入订单</strong></div>
						</div>
						<hr/>

						<div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>
							<div class="am-tabs-bd">
								<div class="am-tab-panel am-fade am-in am-active" id="tab1">
									<div class="order-top">
										<div class="th th-item">
											<td class="td-inner">商品</td>
										</div>
										<div class="th th-price">
											<td class="td-inner">单价</td>
										</div>
										<div class="th th-number">
											<td class="td-inner">&nbsp;&nbsp;&nbsp;数量</td>
										</div>
										<div class="th th-operation">
											<td class="td-inner">&nbsp;&nbsp;</td>
										</div>
										<div class="th th-amount">
											<td class="td-inner">合计</td>
										</div>
										<div class="th th-status">
											<td class="td-inner">交易状态</td>
										</div>
										<div class="th th-change">
											<td class="td-inner">交易操作</td>
										</div>
									</div>

									<div class="order-main">
										<div class="order-list">
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="index.html">个人中心</a>
					</li>
					<li class="person">
						<a href="#">个人资料</a>
						<ul>
							<li>
								<a href="information.html">信息管理</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li>
								<a href="order.html">买入订单</a>
							</li>
							<li>
								<a href="sellorder.html">卖出订单</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的资产</a>
						<ul>
							<li>
								<a href="collection.html">正在出售</a>
							</li>
							<li>
								<a href="upload.html">去上架</a>
							</li>
						</ul>
					</li>
				</ul>
			</aside>
		</div>
		<script>
			$(function(){
				/*检验用户是否登录*/
				if (getCookie("username") == null || getCookie("userid") == null) {
                    window.location.href="../login.html";
                    return;
			    }else{
			    	$("#indexHeader").append(`
                            <a href="#" target="_top" class="h">您好，${getCookie("username")}</a>
                            <a href="javascript:void(0);" onclick="clearCookie()">退出</a>`
                    );
			    }
			   var userid=getCookie("userid");
			   //个人订单
			   $.ajax({
				   	type:"get",
				   	url:"/orders/selectByBuyerid/"+userid,
				   	dataType: "json",
				   	success:function(result){
				   		for(var i=0;i<result.data.length;i++){
				   			var goods;
				   			$.ajax({
				   				type:"get",
				   				url:"/goods/info/"+result.data[i].goodsid,
				   				async:false,
				   				success:function(result){
				   					goods=result.data;
				   				}
				   			});
				   			
				   			var html=`
				   			<div class="order-status5">
								<div class="order-title">
									<div class="dd-num">订单编号：<a href="javascript:;">${result.data[i].id}</a></div>
									<span>成交时间：${result.data[i].createTime}</span>
								</div>
								<div class="order-content">
									<div class="order-left">
										<ul class="item-list">
											<li class="td td-item">
												<div class="item-pic">
													<a href="#" class="J_MakePoint">
														<img src="${goods.img1}" class="itempic J_ItemImg">
													</a>
												</div>
												<div class="item-info">
													<div class="item-basic-info">
														<a href="#">
															<p>${result.data[i].goodsname}</p>
														</a>
													</div>
												</div>
											</li>
											<li class="td td-price">
												<div class="item-price">
													${goods.price}
												</div>
											</li>
											<li class="td td-number">
												<div class="item-number">
													&nbsp;&nbsp;&nbsp;<span>×</span>${result.data[i].num}
												</div>
											</li>
											<li class="td td-operation">
												<div class="item-operation">
													
												</div>
											</li>
										</ul>
									</div>
									<div class="order-right">
										<li class="td td-amount">
											<div class="item-amount">
												合计：${result.data[i].totalPrice}
											</div>
										</li>
										<div class="move-right">
											<li class="td td-status">
												<div class="item-status">
													<p class="Mystatus-${i}"></p>
												</div>
											</li>
											<li class="td td-change">
												<div id="operation-${i}" class="am-btn am-btn-danger anniu" >
												</div>
											</li>
										</div>
									</div>
								</div>
							</div>`;
							$(".order-list").append(html);
							if(result.data[i].status==0){
								$(".Mystatus-"+i).text("待发货");
								$("#operation-"+i).append(`<span onclick="gotoReceive(${result.data[i].id})">确认收货</span>`);
							}
							if(result.data[i].status==1){
								$(".Mystatus-"+i).text("已发货");
								$("#operation-"+i).append(`<span onclick="gotoReceive(${result.data[i].id})">确认收货</span>`);
							}
							if(result.data[i].status==2){
								$(".Mystatus-"+i).text("交易完成");
								$("#operation-"+i).append(`<span onclick="delOrder(${result.data[i].id})">删除订单</span>`);
							}
				   		}
				   	}
			   });
			})	
			
			/**
			 * 确认收货
			 */
			function gotoReceive(id){
				var d={"id":id,"status":2}
				$.ajax({
					type:"post",
					url:"/orders/update",
					data:JSON.stringify(d),
					async:true,
					contentType:"application/json; charset=utf-8",
					success:function(result){
							if(result.resultCode == 200) {
								swal({
									title: '更新成功',
									type: 'success',
									showConfirmButton: false,
									timer: 1500
								}).then(
								    function () {
								        window.location.reload();
								    }
								);
								
							} else {
								swal({
									title: '抱歉，更新失败',
									type: 'error',
									showConfirmButton: false,
									timer: 1500
								})
							}
					}
				});
			}
			
			/**
			 * 删除订单
			 */
			function delOrder(id){
				$.ajax({
					type:"get",
					url:"/orders/delete/"+id,
					async:true,
					contentType:"application/json; charset=utf-8",
					success:function(result){
							if(result.resultCode == 200) {
								swal({
									title: '更新成功',
									type: 'success',
									showConfirmButton: false,
									timer: 1500
								}).then(
								    function (){
								        window.location.reload();
								    }
								);
								
							} else {
								swal({
									title: '抱歉，更新失败',
									type: 'error',
									showConfirmButton: false,
									timer: 1500
								})
							}
					}
				}); 
			}
		</script>
	</body>

</html>